<template>
	<div class="wrap">	
		<div class="body">
	    	<div class="headline">			  	    	 	 
	    	 	 <span class="title">异常信息</span>			  	    	 	 
	    	</div>  
	    	
	    	<div class="abnormal_wrap">
               <div class="section">
               	  <div class="word1">本月异常总数</div>
               	  <div style="display: flex;align-items: center;">
               	  	<img src="/img/bigScreen/11.png" alt="" style="width: 18px;height: 18px;"/>
               	  	<span class="word2">{{abnormalNum.abnormalNum}}</span>
               	  </div>
               </div>
               <div class="section">
               	  <div class="word1">已处理异常总数</div>
               	  <div style="display: flex;align-items: center;">
               	  	<img src="/img/bigScreen/09.png" alt="" style="width: 18px;height: 18px;"/>
               	  	<span class="word2">{{abnormalNum.abnormalFinishedNum}}</span>
               	  </div>               	
               </div>
               <div class="section">
               	  <div class="word1">未处理异常总数</div>
               	  <div style="display: flex;align-items: center;">
               	  	<img src="/img/bigScreen/10.png" alt="" style="width: 18px;height: 18px;"/>
               	  	<span class="word2">{{abnormalNum.abnormalUnFinishedNum}}</span>
               	  </div>               	
               </div>
	    	</div>
    	</div>

	</div>
</template>	

<script>
	import {getAbnormalNum} from "@/api/bigScreen/bigScreen";
	export default {
		data() {
			return {
               abnormalNum:{
               	 abnormalFinishedNum:0,
               	 abnormalUnFinishedNum:0,
               	 abnormalNum:0
               },
               timer:null
			}
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
	    },				
		mounted() {
          this.init()
          let that=this
          this.timer=setInterval(function(){
          	that.init()
          },60000)
		},
		methods: {
		   init(){
	           getAbnormalNum().then(res=>{
	            	this.abnormalNum=res.data.data
	           })		   	
		   }
		}
	}
</script>

<style lang="scss" scoped>
.wrap{height: 100%;}
.body{
  height: 100%;	
  display: flex;flex-direction: column;
  .abnormal_wrap{flex: 1;display: flex;}	
  .section{flex: 1;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;color: #fff;
	   .word1{font-size: 14px;font-family:yjsz;margin-bottom: 14px;}
	   .word2{font-size: 20px;font-family:yjsz;margin-left: 10px;}
  }

}
.headline{
		display: flex;
		color: #fff;		
		.title{
	      background: #131420;
	      padding: 8px 15px;
	      display: inline-block;
	      font-size: 14px;
		    box-shadow: inset 0 0 10px 0 rgba(53,145,255,.8);
		    border: 1px solid #3591ff80;          
		}
}	

</style>
